<template>
    <div class="col-md-4">
        <form class="form-horizontal" action="">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" placeholder="用户名" v-model="name">
            </div>
            <div class="form-group">
                <label>评论内容</label>
                <textarea class="form-control" rows="6" placeholder="评论内容" v-model="content"></textarea>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-default pull-right" @click="add()">提交</button>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    /*这个组件需要评论数据,因为它要添加数据*/
    export default {
        name: "Add",
        data(){
            return {
                name:'',
                content:''
            }
        },
        props:{
          addComment:{  //指定属性名/属性类型/是否必须
              type:Function,
              required:true
          }
        },
        methods:{
            add(){
                //1.检查输入数据的合法性
               const name = this.name.trim();
               const content = this.content.trim();
               if(!name || !content){
                   alert('用户名或内容不能为空');
                   return
               }
               //2.获取输入的数据封装成comment对象
                const comment = {name,content};
               //3.添加到comments对象中
                this.addComment(comment);
                //4.清除用户输入的数据
                this.name = '';
                this.content = ''
            }
        }
    }
</script>

<style scoped>

</style>